<template>
  <div class="home-top"> 
    <h3>人气推荐</h3>
  <div class="content">
  <van-card
  v-for="item in goodsList" :key="item.id"
  :tag="item.tag"
  :price="item.retail_price"
  :origin-price="item.origin_price" :desc="item.goods_brief"
  :title="item.name"
  :thumb="item.list_pic_url" >
  </van-card> 
</div>
</div>
</template>

<script setup>
 const goodsList = [
  {
    retail_price:'88',
    name:'超级龙头铜斧子',
    goods_brief:'纯铜斧头摆件 铜斧开运斧头 龙头铜斧子风水铜器家居摆设',
    list_pic_url:'/images/top1.jpg',
    tag:'TOP1'
  },
  {
    retail_price:'40',
    name:'无敌战斧',
    goods_brief:'户外多用斧开山斧消防斧营地斧头野营丛林斧小斧',
    list_pic_url:'/images/top2.jpg',
    tag:'TOP2'
  },
  {
    retail_price:'33',
    name:'无敌野营多功能斧头',
    goods_brief:'高锰钢工兵斧求生战术开山手斧伐木斧',
    list_pic_url:'/images/top3.jpg',
    tag:'TOP3'
  },
  {
    retail_price:'40',
    name:'BG救生斧',
    goods_brief:'随身生存斧户外斧军刀防身野外装备',
    list_pic_url:'/images/top4.jpg',
    tag:'TOP4'
  },
  {
    retail_price:'48',
    name:'户外武士刀',
    goods_brief:'具一体钢高硬度野营随身求生小直刀锋利水果刀礼品刀',
    list_pic_url:'/images/top5.jpg',
    tag:'TOP5'
  },
  {
    retail_price:'35000000',
    name:'布加迪威龙',
    goods_brief:'送礼就送布加迪威龙',
    list_pic_url:'/images/top6.png',
    tag:'TOP6'
  },
  {
    retail_price:'1.8亿',
    name:'敞篷版威龙',
    goods_brief:'世界最强大超跑的传奇',
    list_pic_url:'/images/top7.png',
    tag:'TOP7'
  },
  {
    retail_price:'1.01亿',
    name:'布加迪威航敞篷版',
    goods_brief:'该车0-100km/h加速耗时仅2.5秒',
    list_pic_url:'/images/top8.png',
    tag:'TOP8'
  },
  {
    retail_price:'1.2亿',
    name:'法拉利限量版跑车',
    goods_brief:'他的性能配置“野兽级别”',
    list_pic_url:'/images/top9.png',
    tag:'TOP9'
  },
  {
    retail_price:'2。7亿',
    name:'奥迪派克峰',
    goods_brief:'此车在世界仅此一辆',
    list_pic_url:'/images/top10.png',
    tag:'TOP10'
  }
 ]
</script>


<style lang="less" scoped> 
h3{
  font-size: 22px;
  line-height: 30px;
  text-align: center;
  margin: 0.5rem 0;
}
.content{
  --van-tag-primary-color:#ff8000;
  --van-card-font-size:16px;
  --van-card-background:#f9f9f9;
  background: var(--van-card-background);
:deep(.van-card) {
margin-top: 0;
.van-card   title {
padding: 10px 0 5px; }
.van-card   price-currency {
font-size: var(--van-card-font-size); }

&::after {
content: '';
display: block; height: 3rem;
}
}
 }

</style>

  